<template>
    <div id="main">
        <h2>学生信息列表</h2>
        <el-row>
            <el-button size="small" type="primary"  @click="dialogFormVisible=true">添加</el-button>
            <el-button class="logout" size="small" type="warning"  @click="logout">安全退出</el-button>
        </el-row>
        <el-table
                :data="tableData"
                style="width: 80%">

            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>

            <el-table-column
                    prop="tel"
                    label="联系方式">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>

            <el-table-column
                    prop="birth"
                    label="出生日期">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10, 20, 30, 40]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

<!--        弹出层 -->
        <el-dialog style="text-align: center" :title="title" :visible.sync="dialogFormVisible" @close="clear">
            <el-form :model="form">
                <el-form-item   v-if="title=='编辑学生信息'" hidden>
                    <el-input v-model="form.id" type="hidden" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="form.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="住址" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="生日" :label-width="formLabelWidth">
                    <el-input  type="date" v-model="form.birth" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="add" v-if="title=='添加学生信息'">添加</el-button>
                    <el-button type="primary" @click="edit" v-if="title=='编辑学生信息'">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "IndexView",
        data() {
            return {
                currentPage:1,
                limit:5,
                total:100,
                dialogFormVisible:false,  // 是否显示弹窗  true显示
                formLabelWidth:"80px",
                title:'添加学生信息',
                form:{
                    id:'',
                    name:'',
                    age:'',
                    tel:'',
                    address:'',
                    birth:''
                },
                tableData: [{
                    age:20,
                    tel:'15755361110',
                    birth: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
            }
        },
        created() {
            // 向后台发起分页请求
            this.getPage();
        },
        methods:{

            //  分页查询
            getPage(){
                this.$http.get("http://localhost:8989/kgc/student/page",{
                    params:{
                        page:this.currentPage,
                        limit:this.limit
                    }
                }).then(res=>{  // {data:[{},{}]}
                    this.tableData = res.data.data
                    this.total =  res.data.total
                }).catch(err=>{
                    this.$message.error("服务器异常,请稍后再试")
                })
            },
            // 添加数据回调函数
            add(){
                this.$http.post("http://localhost:8989/kgc/student",this.form)
                .then(res=>{
                    if (res.data.code==0){  //添加成功
                        this.$message({
                            type:"success",
                            message:res.data.msg,
                            onClose:()=>{
                                this.dialogFormVisible = false
                                this.getPage();
                            }
                        })
                    }else {
                        this.$message.warning(res.data.msg)
                    }
                }).catch(err=>{
                    this.$message.error("服务器异常,请稍后再试")
                })
            },
            // 编辑学生信息
            edit(){
                this.$http.put("http://localhost:8989/kgc/student",this.form)
                    .then(res=>{
                        if (res.data.code==0){  //添加成功
                            this.$message({
                                type:"success",
                                message:res.data.msg,
                                onClose:()=>{
                                    this.dialogFormVisible = false
                                    this.getPage();
                                }
                            })
                        }else {
                            this.$message.warning(res.data.msg)
                        }
                    }).catch(err=>{
                    this.$message.error("服务器异常,请稍后再试")
                })
            },
            // 编辑回调函数
            handleEdit(index, row) {
                console.log(index, row);
                this.title="编辑学生信息"
                this.dialogFormVisible=true
                this.$http.get("http://localhost:8989/kgc/student/"+row.id)
                .then(res=>{
                    this.form = res.data.data
                })
            },

            // 删除数据的回调函数
            handleDelete(index, row) {
                //  避免用户的误删除  弹出确认框
                this.$confirm('正在删除当前行数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost:8989/kgc/student/"+row.id)
                        .then(res=>{
                            if (res.data.code==0){  //添加成功
                                this.$message({
                                    type:"success",
                                    message:res.data.msg,
                                    onClose:()=>{
                                        this.getPage();
                                    }
                                })
                            }else {
                                this.$message.warning(res.data.msg)
                            }
                        }).catch(err=>{
                        this.$message.error("服务器异常,请稍后再试")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {  //  改变每页显示条数下拉选时  回调
                this.limit = val
                this.getPage();
            },
            handleCurrentChange(val) {  //  改变页面时  回调
                this.currentPage = val
                this.getPage();
            },


            // 退出登录
            logout(){
                sessionStorage.removeItem("user")
                this.$message({
                    type:"success",
                    message:'安全退出',
                    onClose:()=>{
                        this.$router.push("/login")
                    }
                })
            },

            // 关闭弹窗回调
            clear(){
                this.title="添加学生信息"
                this.form={
                    id:'',
                    name:'',
                    age:'',
                    tel:'',
                    address:'',
                    birth:''
                }
            }
        }
    }
</script>

<style scoped>

    #main{
        width: 100%;
        margin: 100px auto 0;
        padding-left: 200px;
        box-sizing: border-box;
    }
    .el-row{
        position: relative;
        margin-top: 50px;
        margin-bottom: 20px;
    }
    .block{
        margin-top: 15px;
    }
    h2{
        padding-left: 35%;
        color: #42b983;
    }
    .logout{
        position: absolute;
        left: 1000px;
    }
</style>
